<template>
  <div class="paddingTop search_page">
    <head-top head-title="搜索" goBack="true"></head-top>
    <form class="search_form">
      <input
        type="search"
        name="search"
        placeholder="请输入商家或美食名称"
        class="search_input"
        v-model="searchValue"
        @input="checkInput"
      />
      <input type="submit" name="submit" class="search_submit" @click.prevent="searchTarget('')" />
    </form>
    <section v-if="restaurantList.length">
      <h4 class="title_restaurant">商家</h4>
      <ul class="list_container">
        <li
          @click="gotoShop(item)"
          v-for="item in restaurantList"
          tag="li"
          :key="item.id"
          class="shop_li"
        >
          <section>
            <img :src="myImgBaseUrl + item.image_path" class="shop_img" />
          </section>
          <hgroup class="shop_right">
            <header class="shop_detail_header">
              <h4 :class="item.is_premium? 'premium': ''" class="shop_title ellipsis">{{item.name}}</h4>
              <ul class="shop_detail_ul">
                <li v-for="item in item.supports" :key="item.id" class="supports">{{item.icon_name}}</li>
              </ul>
            </header>
            <h5 class="rating_order_num">
              <section class="rating_order_num_left">
                <section class="rating_section">
                  <rating-star :rating="item.score"></rating-star>
                  <span class="rating_num">{{item.score}}</span>
                </section>
                <section class="order_section">月售{{item.mouthorder}}单</section>
              </section>
              <section class="rating_order_num_right">
                <span
                  class="delivery_style delivery_left"
                  v-if="item.delivery_mode"
                >{{item.delivery_mode.text}}</span>
                <!-- <span class="delivery_style delivery_right">准时达</span> -->
              </section>
            </h5>
            <h5 class="fee_distance">
              <p class="fee">
                ¥{{item.condition}}起送
                <span class="segmentation">/</span>
                配送费￥{{item.piecewise_agent_fee}}
              </p>
              <p class="distance_time">
                <!-- <span v-if="Number(item.distance)">
                  {{item.distance > 1000? (item.distance/1000).toFixed(2) + 'km': item.distance + 'm'}}
                  <span
                    class="segmentation"
                  >/</span>
                </span>
                <span v-else>{{item.distance}}</span> -->
                <!-- <span class="order_time">{{item.needtime}}分钟</span> -->
              </p>
            </h5>
          </hgroup>
        </li>
      </ul>
    </section>
    <section class="search_history" v-if="searchHistory.length&&showHistory">
      <h4 class="title_restaurant">搜索历史</h4>
      <ul>
        <li v-for="(item, index) in searchHistory" :key="index" class="history_list">
          <span class="history_text ellipsis" @click="searchTarget(item)">{{item}}</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            version="1.1"
            class="delete_icon"
            @click="deleteHistory(index)"
          >
            <line x1="8" y1="8" x2="18" y2="18" style="stroke:#999;stroke-width:3" />
            <line x1="18" y1="8" x2="8" y2="18" style="stroke:#999;stroke-width:3" />
          </svg>
        </li>
      </ul>
      <footer class="clear_history" @click="clearAllHistory">清空搜索历史</footer>
    </section>
    <div class="search_none" v-if="emptyResult">很抱歉！无搜索结果</div>
    <!-- <foot-guide></foot-guide> -->
  </div>
</template>

<script>
import headTop from "../../components/header/head";
import footGuide from "../../components/footer/footGuide";
import { searchRestaurant, getBusinessList } from "../../service/getData";
import { imgBaseUrl, myImgBaseUrl } from "../../config/env";
import { getStore, setStore } from "../../config/mUtils";
import shopList from "src/components/common/shoplist";
import ratingStar from '../../components/common/ratingStar'
import { Toast } from "vant";

export default {
  data() {
    return {
      geohash: "", // msite页面传递过来的地址信息
      searchValue: "", // 搜索内容
      restaurantList: [], // 搜索返回的结果
      imgBaseUrl, // 图片域名地址
      myImgBaseUrl,
      searchHistory: [], // 搜索历史记录
      showHistory: true, // 是否显示历史记录，只有在返回搜索结果后隐藏
      emptyResult: false // 搜索结果为空时显示
    };
  },
  created() {},
  mounted() {
    this.geohash = this.$route.query.geohash;
    //获取搜索历史记录
    if (getStore("searchHistory")) {
      this.searchHistory = JSON.parse(getStore("searchHistory"));
    }
  },
  components: {
    headTop,
    ratingStar,
    footGuide
  },
  methods: {
    gotoShop(item) {
      if (item.online == "200") {
        console.log(this.$router)
        this.$router.push({
          path: "/shop",
          query: {
            geohash: this.geohash,
            id: item.id,
            shopImg: item.image_path,
            shopName: item.name,
            shopTime: item.needtime,
            piecewise_agent_fee: item.piecewise_agent_fee,
            promotion_info: item.promotion_info,
            condition: item.condition
          }
        });
      } else {
        Toast.fail("该商户暂停营业");
      }
    },
    //点击提交按钮，搜索结果并显示，同时将搜索内容存入历史记录
    async searchTarget(historyValue) {
      if (historyValue) {
        this.searchValue = historyValue;
      }
      //隐藏历史记录
      this.showHistory = false;
      //获取搜索结果
    //   this.restaurantList = await searchRestaurant(
    //     this.geohash,
    //     this.searchValue
    //   );
      let res = await getBusinessList(30.222377,119.70663,'',"",this.searchValue)
      this.restaurantList = res.data
      this.emptyResult = !this.restaurantList.length;
      /**
       * 点击搜索结果进入下一页面时进行判断是否已经有一样的历史记录
       * 如果没有则新增，如果有则不做重复储存，判断完成后进入下一页
       */
      let history = getStore("searchHistory");
      if (history) {
        let checkrepeat = false;
        this.searchHistory = JSON.parse(history);
        this.searchHistory.forEach(item => {
          if (item == this.searchValue) {
            checkrepeat = true;
          }
        });
        if (!checkrepeat) {
          this.searchHistory.push(this.searchValue);
        }
      } else {
        this.searchHistory.push(this.searchValue);
      }
      setStore("searchHistory", this.searchHistory);
    },
    //搜索结束后，删除搜索内容直到为空时清空搜索结果，并显示历史记录
    checkInput() {
      if (this.searchValue === "") {
        this.showHistory = true; //显示历史记录
        this.restaurantList = []; //清空搜索结果
        this.emptyResult = false; //隐藏搜索为空提示
      }
    },
    //点击删除按钮，删除当前历史记录
    deleteHistory(index) {
      this.searchHistory.splice(index, 1);
      setStore("searchHistory", this.searchHistory);
    },
    //清除所有历史记录
    clearAllHistory() {
      this.searchHistory = [];
      setStore("searchHistory", this.searchHistory);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.search_page {
  margin-bottom: 2rem;
}
.search_form {
  background-color: #fff;
  padding: 0.5rem;
  display: flex;
  input {
    height: 1.5rem;
  }
  .search_input {
    flex: 4;
    border: 0.025rem solid $bc;
    @include sc(0.65rem, #333);
    border-radius: 0.125rem;
    background-color: #f2f2f2;
    font-weight: bold;
    padding: 0 0.25rem;
  }
  .search_submit {
    flex: 1;
    border: 0.025rem solid $blue;
    margin-left: 0.2rem;
    @include sc(0.65rem, #fff);
    border-radius: 0.125rem;
    background-color: $blue;
    font-weight: bold;
    padding: 0 0.25rem;
  }
}
.title_restaurant {
  font-size: 0.6rem;
  line-height: 2rem;
  text-indent: 0.5rem;
  font-weight: bold;
  color: #666;
}
.list_container {
  background-color: #fff;
  .shop_li {
    display: flex;
    border-bottom: 0.025rem solid #f1f1f1;
    padding: 0.7rem 0.4rem;
  }
  .shop_img {
    @include wh(2.7rem, 2.7rem);
    display: block;
    margin-right: 0.4rem;
  }
  .list_back_li {
    height: 4.85rem;
    .list_back_svg {
      @include wh(100%, 100%);
    }
  }
  .shop_right {
    flex: auto;
    .shop_detail_header {
      @include fj;
      align-items: center;
      .shop_title {
        width: 8.5rem;
        color: #333;
        padding-top: 0.01rem;
        @include font(0.65rem, 0.65rem, "PingFangSC-Regular");
        font-weight: 700;
      }
      .premium::before {
        content: "品牌";
        display: inline-block;
        font-size: 0.5rem;
        line-height: 0.6rem;
        color: #333;
        background-color: #ffd930;
        padding: 0 0.1rem;
        border-radius: 0.1rem;
        margin-right: 0.2rem;
      }
      .shop_detail_ul {
        display: flex;
        transform: scale(0.8);
        margin-right: -0.3rem;
        .supports {
          @include sc(0.5rem, #999);
          border: 0.025rem solid #f1f1f1;
          padding: 0 0.04rem;
          border-radius: 0.08rem;
          margin-left: 0.05rem;
        }
      }
    }
    .rating_order_num {
      @include fj(space-between);
      height: 0.6rem;
      margin-top: 0.52rem;
      .rating_order_num_left {
        @include fj(flex-start);
        .rating_section {
          display: flex;
          .rating_num {
            @include sc(0.4rem, #ff6000);
            margin: 0 0.2rem;
          }
        }
        .order_section {
          transform: scale(0.8);
          margin-left: -0.2rem;
          @include sc(0.4rem, #666);
        }
      }
      .rating_order_num_right {
        display: flex;
        align-items: center;
        transform: scale(0.7);
        min-width: 5rem;
        justify-content: flex-end;
        margin-right: -0.8rem;
        .delivery_style {
          font-size: 0.4rem;
          padding: 0.04rem 0.08rem 0;
          border-radius: 0.08rem;
          margin-left: 0.08rem;
          border: 1px;
        }
        .delivery_left {
          color: #fff;
          background-color: $blue;
          border: 0.025rem solid $blue;
        }
        .delivery_right {
          color: $blue;
          border: 0.025rem solid $blue;
        }
      }
    }
    .fee_distance {
      margin-top: 0.52rem;
      @include fj;
      @include sc(0.5rem, #333);
      .fee {
        transform: scale(0.9);
        @include sc(0.5rem, #666);
      }
      .distance_time {
        transform: scale(0.9);
        span {
          color: #999;
        }
        .order_time {
          color: $blue;
        }
        .segmentation {
          color: #ccc;
        }
      }
    }
  }
}

.search_history {
  .history_list {
    background-color: #fff;
    border-bottom: 0.025rem solid $bc;
    @include font(0.7rem, 2rem);
    padding: 0 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .history_text {
      display: inline-block;
      width: 80%;
    }
    .delete_icon {
      @include wh(1rem, 1rem);
    }
  }
  .clear_history {
    background-color: #fff;
    color: $blue;
    @include font(0.7rem, 2rem);
    font-weight: bold;
    text-align: center;
  }
}
.search_none {
  margin: 0 auto;
  @include font(0.65rem, 1.75rem);
  color: #333;
  background-color: #fff;
  text-align: center;
  margin-top: 0.125rem;
}
</style>
